<%@ page import="org.subject.entity.User" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--引入 jstl--%>
<%@include file="common/tag.jsp" %>
<!DOCTYPE html>
<%-- 获取资源根路径--%>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<html>
<head>
    <title>个人中心</title>
    <%@include file="common/head.jsp" %>

    <link rel="stylesheet" type="text/css"
          href="/./resource/jquery-easyui-1.3.3/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css"
          href="/./resource/jquery-easyui-1.3.3/themes/icon.css">
    <script type="text/javascript"
            src="/./resource/jquery-easyui-1.3.3/jquery.min.js"></script>
    <script type="text/javascript"
            src="/./resource/jquery-easyui-1.3.3/jquery.easyui.min.js"></script>
    <script type="text/javascript"
            src="/./resource/jquery-easyui-1.3.3/locale/easyui-lang-zh_CN.js"></script>
    <script type="text/javascript"
            src="/./resource/ueditor/ueditor.config.js"></script>
    <script type="text/javascript"
            src="/./resource/ueditor/ueditor.all.min.js"></script>
    <%
        User user = (User) session.getAttribute("user");
    %>

    <style>
        html, body {
            margin: 0;
            padding: 0;
            height: 100%;
        }

        #container {
            min-height: 100%;
            height: auto !important;
            height: 100%; /*IE6不识别min-height*/
            position: relative;
        }

        .fl {
            float: left;
            display: inline;
        }

        .nav_module {
            margin-bottom: 15px;
        }

        #page {
            width: 100%;
            margin-bottom: 50px; /*等于footer的高度*/
        }

        .nav_module li {
            list-style: none;
        }

        .nav_module li.dt {
            height: 28px;
            line-height: 28px;
            font-weight: bold;
        }

        .nav_module ul li a {
            height: 28px; /*设置高度为28px*/
            line-height: 28px; /*设置行距为28px，让文字在每行的中间位置*/
            color: #000; /*文字颜色是白色*/
            margin: 5px 10px;
            font-size: 12px; /*用12号字*/
            display: block; /*这个比较关键，因为a本身就是联级元素，本身不具有宽高，用这个把它变成块级元素，这样前面设置的宽和高就能起作用了*/
            text-align: center; /*让文本居中*/
            text-decoration: none; /*去掉下划线*/
        }

        .bNav {
            margin-top: 10px;
            margin: auto;
            background: #F1F1F1;
            /*text-align:center;*/
        }

        .bNav ul {
            padding: 4px 20px;
            margin: 0;
            overflow: hidden;
        }

        .bNav ul li {
            display: inline;
            padding: 0;
        }

        a {
            color: #666;
        }

        .pageNum {
            margin-top: 20px;
            text-align: center;
        }
    </style>
</head>
<body background="/./resource/images/bg.jpg" style="background-size: cover;background-repeat: no-repeat;">
<%--页面显示部分--%>
<div id="container" class="container">
    <jsp:include page="common/Top.jsp"/>
    <div id="page" class="panel panel-default">
        <div class="panel-body">
            <div class="col-md-2  fl">
                <ul class="nav_module">
                    <li class="dt">账号设置</li>
                    <li ng-hide="CurrentUser.IsShop"><a href="/user/detail?userId=<%=user.getUserId()%>">个人信息</a></li>
                </ul>
                <ul class="nav_module">
                    <li class="dt">竞赛信息</li>
                    <c:choose>
                        <c:when test="${user.getUserRole() == 2 || user.getUserRole()==1}">
                            <li><a href="/message/publishHistory?userId=${user.userId}">发布竞赛历史</a></li>
                        </c:when>
                    </c:choose>
                    <c:choose>
                        <c:when test="${user.getUserRole() == 2 || user.getUserRole()==1}">
                            <li><a href="/article/articlePage">竞赛通知管理</a></li>
                        </c:when>
                    </c:choose>
                    <c:choose>
                        <c:when test="${user.getUserRole()==1}">
                            <li><a href="/message/messageByFId?type=1&facultyId=${user.facultyId}">学生参赛信息</a></li>
                        </c:when>
                    </c:choose>
                    <c:choose>
                        <c:when test="${user.getUserRole() == 2}">
                            <li><a href="/message/messageByFId?type=2&facultyId=${user.facultyId}">本院学生参赛</a></li>
                        </c:when>
                    </c:choose>
                    <c:choose>
                        <c:when test="${user.getUserRole() == 3}">
                            <li><a href="/regist/userhistory?userId=${user.userId}">已报竞赛</a></li>
                        </c:when>
                    </c:choose>
                    <c:choose>
                        <c:when test="${user.getUserRole() == 3}">
                            <li ng-hide="CurrentUser.IsShop"><a href="#">竞赛历史</a></li>
                        </c:when>
                    </c:choose>
                </ul>
            </div>

            <div class="col-md-10">
                <div class="bNav">
                    <ul>
                        <li><a href="/user/detail?userId=<%=user.getUserId()%>">个人中心</a></li>
                        <li><span> > </span></li>
                        <li>竞赛信息</li>
                        <li><span> > </span></li>
                        <li>竞赛通知管理</li>
                    </ul>
                </div>
                <br/>
                <a href="javascript:openArticleAddDialog()" class="easyui-linkbutton"
                   iconCls="icon-add" plain="true">添加</a>

                <div class="tab-content" style="margin-top: 20px;margin-left: 40px;">
                    <form method="get" action="/message/list" id="mainForm">
                        <div class="rightCont">
                            <%--<table class="tab1" hidden>
                                <tbody>
                                <td><label path="title">标题：</label></td>
                                <td><input name="title" value="${title}"/></td>
                                <td><input type="submit" value="搜索"></td>
                                </tbody>
                            </table>--%>
                            <div class="zixun fix" style="margin-top: 20px">
                                <table class="tab2" width="100%">
                                    <thead>
                                    <tr>
                                        <th style="height: 40px">序号</th>
                                        <th>标题</th>
                                        <th>发布人</th>
                                        <th>发布时间</th>
                                        <th>操作</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <c:forEach items="${articleList}" var="article" varStatus="status">
                                        <tr
                                                <c:if test="${status.index % 2 != 0}">style='background-color:#ECF6EE;'</c:if>>
                                            <td style="height: 40px">${status.index + 1}</td>
                                            <td>${article.articleTitle}</td>
                                            <td>${article.addName}</td>
                                            <td><fmt:formatDate value="${article.articleCreateTime}"
                                                                pattern="yyyy-MM-dd"/></td>
                                            <td>
                                                <a href='${pageContext.request.contextPath}/article/findById?id=${article.articleId}'<%-- target='_blank'--%>>查看</a>
                                                &nbsp;&nbsp;&nbsp;
                                                <a href='${pageContext.request.contextPath}/article/deleteById?id=${article.articleId}'>删除</a>
                                            </td>
                                        </tr>
                                    </c:forEach>
                                    </tbody>
                                </table>
                                <div class='page fix'>
                                    <div class='page fix pageNum'>
                                        共 <b>${page.totalNumber}</b> 条
                                        <c:if test="${page.currentPage != 1}">
                                            <a style="color: #2777ad" href="<%= basePath %>article/managePage?page=1"
                                               class='first'>首页</a>
                                            <a style="color: #2777ad"
                                               href="<%= basePath %>article/managePage?page=${page.currentPage-1}"
                                               class='pre'>上一页</a>
                                        </c:if>
                                        当前第<span>${page.currentPage}/${page.totalPage}</span>页
                                        <c:if test="${page.currentPage != page.totalPage}">
                                            <a style="color: #2777ad"
                                               href="<%= basePath %>article/managePage?page=${page.currentPage+1}"
                                               class='next'>下一页</a>
                                            <a style="color: #2777ad"
                                               href="<%= basePath %>article/managePage?page=${page.totalPage}"
                                               class='last'>末页</a>
                                        </c:if>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
    <jsp:include page="common/footer.jsp"/>
</div>
<div>
    <div id="dlg" class="easyui-dialog"
         style="width: 850px;height:555px;padding: 10px 20px; position: relative; z-index:1000;"
         closed="true" buttons="#dlg-buttons">
        <form id="fm" method="post">
            <table cellspacing="8px">
                <tr>
                    <td>标题：</td>
                    <td><input type="text" id="title" name="articleTitle"
                               class="easyui-validatebox" required="true"/>&nbsp;<font
                            color="red">*</font>
                    </td>
                </tr>
                <tr>
                    <td>添加人：</td>
                    <td><input type="text" id="addName" name="addName"/>
                        <input type="text" id="articleCreateDate" name="articleCreateDate" type="hidden"
                               style="display:none;"/>
                    </td>
                </tr>
                <tr>
                    <td>详细内容</td>
                    <td id="editor">
                    </td>
                </tr>
            </table>
        </form>
    </div>

    <div id="dlg-buttons">
        <a href="javascript:saveArticle()" class="easyui-linkbutton"
           iconCls="icon-ok">保存</a> <a href="javascript:closeArticleDialog()"
                                       class="easyui-linkbutton" iconCls="icon-cancel">关闭</a>
    </div>
</div>
<script type="text/javascript">
    var url;
    function ResetEditor() {
        UE.getEditor('myEditor', {
            initialFrameHeight: 480,
            initialFrameWidth: 660,
            enableAutoSave: false,
            elementPathEnabled: false,
            wordCount: false,
        });
    }
    function searchArticle() {
        $("#dg").datagrid('load', {
            "articleTitle": $("#articleTitle").val(),
        });
    }

    function deleteArticle() {
        var selectedRows = $("#dg").datagrid('getSelections');
        if (selectedRows.length == 0) {
            $.messager.alert("系统提示", "请选择要删除的数据！");
            return;
        }
        var strIds = [];
        for (var i = 0; i < selectedRows.length; i++) {
            strIds.push(selectedRows[i].id);
        }
        var ids = strIds.join(",");
        $.messager
            .confirm(
                "系统提示",
                "您确认要删除这<font color=red>" + selectedRows.length
                + "</font>条数据吗？",
                function (r) {
                    if (r) {
                        $
                            .post(
                                "${pageContext.request.contextPath}/article/delete.do",
                                {
                                    ids: ids
                                },
                                function (result) {
                                    if (result.success) {
                                        $.messager.alert(
                                            "系统提示",
                                            "数据已成功删除！");
                                        $("#dg").datagrid(
                                            "reload");
                                    } else {
                                        $.messager.alert(
                                            "系统提示",
                                            "数据删除失败！");
                                    }
                                }, "json");
                    }
                });

    }

    function openArticleAddDialog() {
        var html = '<div id="myEditor" name="articleContent"></div>';
        $('#editor').append(html);
        ResetEditor(editor);
        var ue = UE.getEditor('myEditor');
        ue.setContent("");
        $("#dlg").dialog("open").dialog("setTitle", "添加文本信息");
        url = "${pageContext.request.contextPath}/article/save";
    }

    function saveArticle() {
        $("#fm").form("submit", {
            url: url,
            onSubmit: function () {
                return $(this).form("validate");
            },
            success: function (result) {
                $.messager.alert("系统提示", "保存成功");
                $("#dlg").dialog("close");
                $("#dg").datagrid("reload");
                resetValue();
            }
        });
    }

    function openArticleModifyDialog() {
        var selectedRows = $("#dg").datagrid('getSelections');
        if (selectedRows.length != 1) {
            $.messager.alert("系统提示", "请选择一条要编辑的数据！");
            return;
        }
        var row = selectedRows[0];
        $("#dlg").dialog("open").dialog("setTitle", "修改信息");
        $('#fm').form('load', row);
        var html = '<div id="myEditor" name="articleContent"></div>';
        $('#editor').append(html);
        ResetEditor(editor);
        var ue = UE.getEditor('myEditor');
        ue.setContent(row.articleContent);
        url = "${pageContext.request.contextPath}/article/save.do?id="
            + row.id;
    }

    function formatHref(val, row) {
        return "<a href='${pageContext.request.contextPath}/article.html?id=" + row.id + "' target='_blank'>查看详情</a>";
    }

    function resetValue() {
        $("#title").val("");
        $("#addName").val("");
        $("#container").val("");
        ResetEditor();
    }

    function closeArticleDialog() {
        $("#dlg").dialog("close");
        resetValue();
    }
</script>
</body>
<%--<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>--%>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</html>
